<template>
  <div id="app">
    <div class="ctx">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
  watch,
  watchEffect,
} from "vue";
import { useRouter } from "vue-router";
import _ from "lodash";
export default defineComponent({
  setup() {
    const self: any = getCurrentInstance();
    const router: any = useRouter();
    const obj: any = reactive({
      msg: "hello world",
      loading: false,
      obj: { a: 1, b: [] },
      aa: 1,
      a: 2,
    });
    const id = ref(obj.msg);
    const str = ref("12");
    const funcObj = {
      but: () => {
        obj.loading = true;
        self.ctx.$http
          .get("http://localhost:8000/upload", {
            name: "http://localhost:8000/static/2021.jpg",
          })
          .then((res: object) => {});
      },
      formIndex: () => {
        router.push({
          path: "/formIndex",
        });
      },
    };
    watch([id], (n) => {}),
      watch(
        () => obj.obj.a,
        (n) => {
          // 函数回调监听具体某个值
          // console.log(n,'qweas')
        }
      );
    watchEffect(() => {
      // console.log(obj.msg,'ess')
    });
    onMounted(() => {
      // console.log(watch)
      // console.log(obj,'12')
      id.value = "qsa";
      obj.obj.a = 2;
      obj.msg = "1231";
      console.log(
        _.merge({
          rootValue: 37.5,
          propList: ["*"],
          // unitToConvert: 'px',
          // viewportWidth: 750,
          // unitPrecision: 5,
          // propList: ['*'],
          // viewportWidth: 375,
          // viewportUnit: 'vw',
          // fontViewportUnit: 'vw',
          // selectorBlackList: [],
          // minPixelValue: 1,
          // mediaQuery: false,
          // replace: true,
          // exclude: [],
          // landscape: false,
          // landscapeUnit: 'vw',
          // landscapeWidth: 568
        })
      );
    });
    return {
      ...toRefs(obj),
      str,
      ...funcObj,
    };
  },
});
</script>

